<template>
  <!-- 权限设置 -->
  <div class="container">
    <el-tree
      ref="tree"
      class="el-tree"
      :data="treeList.list"
      :render-content="renderContent"
      default-expand-all
      show-checkbox
      node-key="id"
      :default-checked-keys="treeList.checked"
      highlight-current
      :props="defaultProps"
      @node-expand="handleExpand"
      @check="currentChecked"
    />
  </div>
</template>
<script>
export default {
  props: {
    treeList: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'childlist',
        label: 'name'
      },
      activeNames: null,
      activeNames2: null,
      checked: []// 选中权限
    }
  },
  mounted() {
    console.log('tree', this.treeList.checked)
    // console.log('tree', JSON.stringify(this.treeList.checked))
    this.changeCss()
    console.log(this.$refs)
  },
  methods: {
    // 获取key
    currentChecked(nodeObj, SelectedObj) {
      console.log(SelectedObj.checkedKeys) // 这是选中的节点的key数组
      // 给父组件传递数据
      this.$emit('sendChecked', SelectedObj.checkedKeys)
      // console.log(SelectedObj.checkedNodes) // 这是选中的节点数组
    },
    outputData() {
      console.log(this.activeNames)
      console.log(this.activeNames2)
      this.getCurrentKey()
    },
    handleExpand() {
      // 节点被展开时触发的事件
      // 因为该函数执行在renderContent函数之前，所以得加this.$nextTick()
      this.$nextTick(() => {
        this.changeCss()
      })
    },
    renderContent(h, { node, data, store }) {
      // 树节点的内容区的渲染 Function
      let classname = ''
      // 由于项目中有三级菜单也有四级级菜单，就要在此做出判断
      if (node.level === 3) {
        classname = 'foo'
      }
      if (node.level === 2 && node.childNodes.length === 0) {
        classname = 'foo'
      }
      return h(
        'p',
        {
          class: classname
        },
        node.label
      )
    },
    changeCss() {
      var levelName = document.getElementsByClassName('foo') // levelname是上面的最底层节点的名字
      console.log('levelName', levelName)
      for (var i = 0; i < levelName.length; i++) {
        // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
        // levelName[i].parentNode.style.cssFloat = 'left' // 最底层的节点，包括多选框和名字都让他左浮动
        // levelName[i].parentNode.style.styleFloat = 'left'
        levelName[i].parentNode.onmouseover = function() {
          this.style.backgroundColor = '#fff'
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  // padding: 40px;
  height: 400px;
}
.routeList-box {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  margin-bottom: 20px;
  .el-tree {
    margin: 12px 0;
  }
  .el-collapse-item__header {
    height: 40px;
    background-color: #f4f4f4;
    padding: 0 10px;
  }
  .el-icon-arrow-right:before {
    color: #409eff;
  }
}
.el-tree-node__content::before {
  content: "";
  padding-left: 10px;
}
.el-checkbox__input {
  margin-right: 6px;
}
</style>
